/** @jsxImportSource @emotion/react */
import * as React from "react";
import {css} from "@emotion/react";
import {
  CCell, Cell, Table, TableBody, TableRow, Text, TableHead, TextArea, BlobInputList, LineColumn, InputLine,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl} from "../../common/base";
import {TailMenRowIspCheck} from "../../contain/rarelyVary";
import {useMeasureInpFilter} from "../../common/hooks";
import {objNestSet} from "../../../common/tool";
import {useOmnipotentPrefCs, useOmnipotentPrefTitle} from "../../hook/useOmnipotentPref";
import {tail附页} from "./orcBase";

const items检验项 = [
  ['工作情', [{t:'安全管理使用工作'}], '本年度使用安全管理工作情况' ],
  ['保养记', [{t:'技术资料和文件',s:3}], '运行、维护保养记录', ],
  ['仪表校', [{}], '安全附件与安全保护装置及仪表校验或者检定记录、报告',  ],
  ['资格证', [{}], '安全管理、维护保养人员的资格证', ],
  ['密封老', [{t:'舱体',s:4}], '舱门、递物筒的密封材料是否老化、变形' ],
  ['导静电装', [{}], '医用氧舱加压舱舱内导静电装置的连接', ],
  ['有机玻', [{}], '有机玻璃材料的划伤、劣化、银纹等缺陷以及泄漏情况' ],
  ['传感采集', [{}], '各传感器数据采集口的畅通与保护' ],
  ['呼吸装', [{t:'压力调节系统与呼吸气系统',s:6}], '舱内呼吸装置（含急救吸氧装置）工作情况' ],
  ['急排放装', [{}], '舱内外部应急排放装置开启、关闭是否灵敏、可靠以及警示标志' ],
  ['控制阀', [{}], '各控制阀门操作是否灵敏、可靠、无泄漏' ],
  ['油污染', [{}], '呼吸气系统有无油脂污染现象' ],
  ['过滤清洗', [{}], '气体过滤材料清洗、更换情况' ],
  ['瓶检有效', [{}], '氧气瓶的检验有效期（用气瓶作为呼吸气体供应源的）' ],
  ['通讯对讲', [{t:'电气系统与舱内环境调节系统',s:3}], '照明装置（含应急照明装置）、视频监控装置、通讯对讲装置、应急呼叫装置、温度调节和加湿装置的工作情况' ],
  ['急电源', [{}], '在正常供电网络中断时，应急电源装置的工作情况' ],
  ['空调机', [{}], '舱内环境调节系统空调电机、控制装置的工作情况' ],
  ['喷淋消防', [{t:'消防系统与氧舱使用环境',s:3}], '医用空气加压氧舱水喷淋消防系统的完好情况', ],
  ['消防有效', [{}], '舱内外部配备的消防器材有效期以及警示标志',  ],
  ['房防爆', [{}], '氧舱以及呼吸气体供应源的场地、房间防爆、通风、消防措施和有无油脂污染情况', ],
  ['压表有效', [{t:'安全附件与安全保护装置及仪表',s:5}], '安全阀、压力表以及其他需要校验或者检定的仪器、仪表的有效期', ],
  ['温湿测量', [{}], '呼吸气体浓度和温度、湿度测量装置、仪表工作情况' ],
  ['浓度报警', [{}], '呼吸气体浓度测定装置超标报警功能' ],
  ['浓度传感', [{}], '呼吸气体浓度传感器的有效期' ],
  ['自动测', [{}], '运行参数自动测定、显示、记录装置的工作情况' ],
  ['容器年检', [{t:'配套压力容器'}], '《固定式压力容器安全技术监察规程》中年度检查项目的情况' ],
  ['修换部', [{t:'修理、更换情况'}], '本年度经修理的部位、更换的零部件的工作情况' ],
  ['警示标', [{t:'安全警示标志',s:1}], '安全警示标志及其说明' ],
    //【特别注意】可定做项目序号=@代码耦合@！ : 固定数目【给用户增加项目】其它1 其他1: {"t":''}
  ['其它1', [{t:'增加的检验项目',s:3}], ' ' ],
  ['其它2', [{} ], ' ' ],
  ['其它3', [{} ], ' ' ],
];

export const itemA检验项: string[] = ['附页说明' ];
items检验项.forEach(([name, title, initIsp], i: number) => {
  itemA检验项.push(name as string);
});
const 检查结果选=['√', '×', '—'];

const config项目上=items检验项.slice(0,17);
//似乎原本？？应该和 “目录” 项目列表合并集成一起的编辑器， #单独分出？ #这丫也好，更清晰点的编辑操作。
export const AppendixPage =
    React.forwardRef((
        {children, show, alone = true, refWidth, label, }: InternalItemProps, ref
    ) => {
      const {inp, setInp} = useItemInputControl({ref});
      const [getInpFilter] = useMeasureInpFilter(null, itemA检验项,);
      const titNode=useOmnipotentPrefTitle({config: config项目上});
      return (
          <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                               alone={alone} label={label!}>
            <Text variant="h5">{label}：</Text>
            {config项目上.map(([name, _1, _2, unit]: any, i: number) => {
              return (<React.Fragment key={i}>
                <div css={{display: 'flex', flexWrap: 'wrap', alignItems: 'center'}}>
                  {titNode[i]}
                  <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
                    检查结果：
                    <BlobInputList value={inp?.[name]?.r || ''} datalist={检查结果选} rows={1}
                                   style={{display: 'inline-flex', width: '9rem', maxWidth: '100%', fontSize: '1rem',}}
                                   listStyle={css({fontSize: '1rem',})}
                                   onListChange={v => objNestSet(name, 'r', v || undefined, inp, setInp)}/>
                  </div>
                  <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
                    备注：
                    <BlobInputList value={inp?.[name]?.m || ''}  rows={2}
                                   style={{display: 'inline-flex', width: '16rem', maxWidth: '100%',}}
                                   onListChange={v => objNestSet(name, 'm', v || undefined, inp, setInp)}/>
                  </div>
                </div>
              </React.Fragment>);
            })}
            <hr/>
            备注：
            <TextArea  value={inp?.附页说明 ||''} rows={6}
                       onChange={e => setInp({ ...inp, 附页说明: e.currentTarget.value||undefined}) } />
            {children}
          </InspectRecordLayout>
      );
  });

export const AppendixPage2 =
    React.forwardRef((
        {children, show, alone = true, refWidth, label, }: InternalItemProps, ref
    ) => {
      const {inp, setInp} = useItemInputControl({ref});
      const [getInpFilter] = useMeasureInpFilter(null, itemA检验项,);
            //其它1 :需要动态的设置标题，同步显示？  config：动态的。
      const config =React.useMemo(()=>{
          items检验项[28][2]=inp?.其它1?.t;
          items检验项[29][2]=inp?.其它2?.t;
          items检验项[30][2]=inp?.其它3?.t;
          const config项目下=items检验项.slice(17);
          return config项目下;
      },[inp?.其它1, inp?.其它2, inp?.其它3]);
      const titNode=useOmnipotentPrefTitle({config, baseSeq:17 });
      return (
          <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                               alone={alone} label={label!}>
            <Text variant="h5">{label}：</Text>
            {config.map(([name, _1, _2, unit]: any, i: number) => {
              return (<React.Fragment key={i}>
                <div css={{display: 'flex', flexWrap: 'wrap', alignItems: 'center'}}>
                  {titNode[i]}
                  <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
                    检查结果：
                    <BlobInputList value={inp?.[name]?.r || ''} datalist={检查结果选} rows={1}
                                   style={{display: 'inline-flex', width: '9rem', maxWidth: '100%', fontSize: '1rem',}}
                                   listStyle={css({fontSize: '1rem',})}
                                   onListChange={v => objNestSet(name, 'r', v || undefined, inp, setInp)}/>
                  </div>
                  <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
                    备注：
                    <BlobInputList value={inp?.[name]?.m || ''}  rows={2}
                                   style={{display: 'inline-flex', width: '16rem', maxWidth: '100%',}}
                                   onListChange={v => objNestSet(name, 'm', v || undefined, inp, setInp)}/>
                  </div>
                </div>
              </React.Fragment>);
            })}
            <Text variant="h5" css={{fontSize:'1.3rem',marginTop:'1rem'}}>最后3个增加检验项目的定义 {'>>'}</Text>
            <LineColumn>
              <InputLine label={`项目29名称：`}>
                <BlobInputList value={inp?.其它1?.t ||''} style={{display: 'inline-table', width: '7rem'}}  rows={2}
                               onListChange={v => objNestSet('其它1','t',v||undefined, inp, setInp) }/>
              </InputLine>
              <InputLine label={`项目30名称：`}>
                <BlobInputList value={inp?.其它2?.t ||''} style={{display: 'inline-table', width: '7rem'}}  rows={2}
                               onListChange={v => objNestSet('其它2','t',v||undefined, inp, setInp) }/>
              </InputLine>
              <InputLine label={`项目31名称：`}>
                <BlobInputList value={inp?.其它3?.t ||''} style={{display: 'inline-table', width: '7rem'}}  rows={2}
                               onListChange={v => objNestSet('其它3','t',v||undefined, inp, setInp) }/>
              </InputLine>
            </LineColumn>
            <hr/>
            备注：
            <TextArea  value={inp?.附页说明 ||''} rows={6}
                       onChange={e => setInp({ ...inp, 附页说明: e.currentTarget.value||undefined}) } />
            {children}
          </InspectRecordLayout>
      );
  });

const tailRender = (orc: any, name: string, lix: number, unit: any) => {
  const nneedbig = orc?.[name]?.r?.length >= 3 || (!orc?.[name]?.r);
  return <>
    <CCell><Text css={{fontSize: nneedbig ? '0.875rem' : '1.15rem'}}>{orc?.[name]?.r ?? '／'}</Text></CCell>
    <CCell>{orc?.[name]?.m ?? '／'}</CCell>
  </>;
}

//检验报告附页；     【特别注意】 其它1 可定做项目序号=@代码耦合@！
export const AppendixPageVw = ({orc, rep}: { orc: any, rep: any }
) => {
  const configNew =React.useMemo(()=>{
        const mainp=items检验项.slice(0,28);
        let arr= [] as string[];
        for(let i = 0; i < 3; i++) {
          const name='其它'+(i+1);
          if(orc?.[name]?.t)   arr.push(name);
        }
        const rspanA=arr.length;
        let add=[];
        for(let k = 0; k < rspanA; k++) {
          const name=arr[k];
          if(0===k)  add.push( [name, [{t:'增加的检验项目',s: rspanA }], orc?.[name]?.t ] );
          else  add.push( [name,  [{}],  orc?.[name]?.t ] );
        }
        return [...mainp, ...add ];
  },[orc?.其它1, orc?.其它2, orc?.其它3]);
  const [renderP1,renderP2] = useOmnipotentPrefCs({orc, config: configNew,
                      split:[16],tag:'ApxIspItms', tailRender, pcols: 1, noNo: false, unitCel: false});
  return <>
    <div css={{"@media print": {paddingBottom: '5.5rem', pageBreakInside: 'avoid'}}}>
      <Text id='AppendixPage' variant="h2" css={{textAlign: 'center', marginTop: '1rem',
      }}>氧舱委托年度检查报告附页</Text>
      <div css={{display: 'flex', justifyContent: 'space-between'}}>
        <Text></Text>
        <Text>报告编号：{rep.isp.no}</Text>
      </div>
    </div>
    <Table fixed={ ["3.6%", "9%", "%",  "15%","21%"] }
              css={{borderCollapse: 'collapse', "@media print": {marginTop: '-5.5rem'}}} tight miniw={800}>
      <TableHead>
        <TableRow>
          <CCell><Text css={{fontSize: '0.75rem'}}>序号</Text></CCell><CCell colSpan={2}>检验项目</CCell><CCell>检查结果</CCell><CCell>备注</CCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <RepLink rep={rep} tag={'AppendixPage'}>
          {renderP1}
        </RepLink>
        <RepLink rep={rep} tag={'ApxIspItms_18'}>
          {renderP2}
          <TableRow>
            <Cell split={true} colSpan={5}>
              <div css={{minHeight: '2rem', whiteSpace: 'pre-wrap'}}>
                备注：<br/>{orc?.附页说明 || '／'}
              </div>
            </Cell>
          </TableRow>
        </RepLink>
      </TableBody>
    </Table>
    <TailMenRowIspCheck  orc={orc} rep={rep} cap='检查' href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}>
    </TailMenRowIspCheck>
    {tail附页}
  </>;
};
